<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iconfont Demo</title>
    <link
      rel="shortcut icon"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
      type="image/x-icon"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
    />
    <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
    <link rel="stylesheet" href="demo.css" />
    <link rel="stylesheet" href="iconfont.css" />
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
      .main .logo {
        margin-top: 0;
        height: auto;
      }

      .main .logo a {
        display: flex;
        align-items: center;
      }

      .main .logo .sub-title {
        margin-left: 0.5em;
        font-size: 22px;
        color: #fff;
        background: linear-gradient(-45deg, #3967ff, #b500fe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1 class="logo">
        <a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
          <img
            width="200"
            src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
          />
        </a>
      </h1>
      <div class="nav-tabs">
        <ul id="tabs" class="dib-box">
          <li class="dib active"><span>Unicode</span></li>
          <li class="dib"><span>Font class</span></li>
          <li class="dib"><span>Symbol</span></li>
        </ul>

        <a
          href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4997692"
          target="_blank"
          class="nav-more"
          >查看项目</a
        >
      </div>
      <div class="tab-container">
        <div class="content unicode" style="display: block">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont">&#xea19;</span>
              <div class="name">咪咕音乐</div>
              <div class="code-name">&amp;#xea19;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
              <div class="name">QQ音乐</div>
              <div class="code-name">&amp;#xe602;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
              <div class="name">网易云音乐</div>
              <div class="code-name">&amp;#xe60b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xeb7d;</span>
              <div class="name">酷狗音乐</div>
              <div class="code-name">&amp;#xeb7d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
              <div class="name">酷我音乐</div>
              <div class="code-name">&amp;#xe601;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
              <div class="name">列表</div>
              <div class="code-name">&amp;#xe600;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
              <div class="name">声音</div>
              <div class="code-name">&amp;#xe64c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
              <div class="name">minimize</div>
              <div class="code-name">&amp;#xe697;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
              <div class="name">播放</div>
              <div class="code-name">&amp;#xe63a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
              <div class="name">暂停</div>
              <div class="code-name">&amp;#xe63b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
              <div class="name">上一首</div>
              <div class="code-name">&amp;#xe63c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
              <div class="name">下一首</div>
              <div class="code-name">&amp;#xe63e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
              <div class="name">选项删除</div>
              <div class="code-name">&amp;#xe657;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
              <div class="name">关闭4</div>
              <div class="code-name">&amp;#xe661;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
              <div class="name">信息53</div>
              <div class="code-name">&amp;#xe6bc;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
              <div class="name">最小化</div>
              <div class="code-name">&amp;#xe67a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
              <div class="name">QQ音乐</div>
              <div class="code-name">&amp;#xe615;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
              <div class="name">顺序播放图标</div>
              <div class="code-name">&amp;#xe628;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
              <div class="name">随机播放</div>
              <div class="code-name">&amp;#xe603;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
              <div class="name">播放记录</div>
              <div class="code-name">&amp;#xe8ad;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
              <div class="name">创作</div>
              <div class="code-name">&amp;#xe8ae;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8b0;</span>
              <div class="name">复制</div>
              <div class="code-name">&amp;#xe8b0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8b1;</span>
              <div class="name">话题符号</div>
              <div class="code-name">&amp;#xe8b1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8b6;</span>
              <div class="name">筛选</div>
              <div class="code-name">&amp;#xe8b6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8b7;</span>
              <div class="name">删除</div>
              <div class="code-name">&amp;#xe8b7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8b8;</span>
              <div class="name">设置</div>
              <div class="code-name">&amp;#xe8b8;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c0;</span>
              <div class="name">增加</div>
              <div class="code-name">&amp;#xe8c0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c3;</span>
              <div class="name">帮助</div>
              <div class="code-name">&amp;#xe8c3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c4;</span>
              <div class="name">发现</div>
              <div class="code-name">&amp;#xe8c4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c5;</span>
              <div class="name">时间</div>
              <div class="code-name">&amp;#xe8c5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c6;</span>
              <div class="name">首页</div>
              <div class="code-name">&amp;#xe8c6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c7;</span>
              <div class="name">演出</div>
              <div class="code-name">&amp;#xe8c7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8c9;</span>
              <div class="name">热门</div>
              <div class="code-name">&amp;#xe8c9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe986;</span>
              <div class="name">music</div>
              <div class="code-name">&amp;#xe986;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
              <div class="name">消息</div>
              <div class="code-name">&amp;#xe66d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
              <div class="name">网易云</div>
              <div class="code-name">&amp;#xe604;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
              <div class="name">播放-循环播放</div>
              <div class="code-name">&amp;#xe68d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
              <div class="name">酷狗音乐</div>
              <div class="code-name">&amp;#xe670;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
              <div class="name">当前位置</div>
              <div class="code-name">&amp;#xe610;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
              <div class="name">取消（关闭）</div>
              <div class="code-name">&amp;#xe650;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
              <div class="name">时间</div>
              <div class="code-name">&amp;#xe652;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
              <div class="name">向右</div>
              <div class="code-name">&amp;#xe675;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
              <div class="name">向左</div>
              <div class="code-name">&amp;#xe676;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
              <div class="name">最小化</div>
              <div class="code-name">&amp;#xe677;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
              <div class="name">停止（无框）</div>
              <div class="code-name">&amp;#xe678;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
              <div class="name">底部</div>
              <div class="code-name">&amp;#xe66b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
              <div class="name">返回</div>
              <div class="code-name">&amp;#xe66e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
              <div class="name">更多</div>
              <div class="code-name">&amp;#xe66f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
              <div class="name">更多</div>
              <div class="code-name">&amp;#xe671;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
              <div class="name">速度性能</div>
              <div class="code-name">&amp;#xe679;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
              <div class="name">危险警告</div>
              <div class="code-name">&amp;#xe67b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
              <div class="name">音乐音效</div>
              <div class="code-name">&amp;#xe67d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
              <div class="name">音乐播放列表</div>
              <div class="code-name">&amp;#xe67e;</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="unicode-">Unicode 引用</h2>
            <hr />

            <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
            <ul>
              <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
              <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
            </ul>
            <blockquote>
              <p>
                注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
              </p>
            </blockquote>
            <p>Unicode 使用步骤如下：</p>
            <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
            <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1755750208163') format('woff2'),
       url('iconfont.woff?t=1755750208163') format('woff'),
       url('iconfont.ttf?t=1755750208163') format('truetype'),
       url('iconfont.svg?t=1755750208163#iconfont') format('svg');
}
</code></pre>
            <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
            <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
            <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
            </blockquote>
          </div>
        </div>
        <div class="content font-class">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont icon-mg"></span>
              <div class="name">咪咕音乐</div>
              <div class="code-name">.icon-mg</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-qq"></span>
              <div class="name">QQ音乐</div>
              <div class="code-name">.icon-qq</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-wy"></span>
              <div class="name">网易云音乐</div>
              <div class="code-name">.icon-wy</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-kg"></span>
              <div class="name">酷狗音乐</div>
              <div class="code-name">.icon-kg</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-kw"></span>
              <div class="name">酷我音乐</div>
              <div class="code-name">.icon-kw</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-liebiao"></span>
              <div class="name">列表</div>
              <div class="code-name">.icon-liebiao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shengyin"></span>
              <div class="name">声音</div>
              <div class="code-name">.icon-shengyin</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-minimize"></span>
              <div class="name">minimize</div>
              <div class="code-name">.icon-minimize</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bofang"></span>
              <div class="name">播放</div>
              <div class="code-name">.icon-bofang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zanting"></span>
              <div class="name">暂停</div>
              <div class="code-name">.icon-zanting</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shangyishou"></span>
              <div class="name">上一首</div>
              <div class="code-name">.icon-shangyishou</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiayishou"></span>
              <div class="name">下一首</div>
              <div class="code-name">.icon-xiayishou</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xuanxiangshanchu"></span>
              <div class="name">选项删除</div>
              <div class="code-name">.icon-xuanxiangshanchu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-guanbi"></span>
              <div class="name">关闭4</div>
              <div class="code-name">.icon-guanbi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xinxi"></span>
              <div class="name">信息53</div>
              <div class="code-name">.icon-xinxi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zuixiaohua"></span>
              <div class="name">最小化</div>
              <div class="code-name">.icon-zuixiaohua</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-QQmusic"></span>
              <div class="name">QQ音乐</div>
              <div class="code-name">.icon-QQmusic</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shunxubofangtubiao"></span>
              <div class="name">顺序播放图标</div>
              <div class="code-name">.icon-shunxubofangtubiao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-suijibofang"></span>
              <div class="name">随机播放</div>
              <div class="code-name">.icon-suijibofang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bofangjilu"></span>
              <div class="name">播放记录</div>
              <div class="code-name">.icon-bofangjilu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-chuangzuo"></span>
              <div class="name">创作</div>
              <div class="code-name">.icon-chuangzuo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuzhi"></span>
              <div class="name">复制</div>
              <div class="code-name">.icon-fuzhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-huatifuhao"></span>
              <div class="name">话题符号</div>
              <div class="code-name">.icon-huatifuhao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shaixuan"></span>
              <div class="name">筛选</div>
              <div class="code-name">.icon-shaixuan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shanchu"></span>
              <div class="name">删除</div>
              <div class="code-name">.icon-shanchu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shezhi"></span>
              <div class="name">设置</div>
              <div class="code-name">.icon-shezhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zengjia"></span>
              <div class="name">增加</div>
              <div class="code-name">.icon-zengjia</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bangzhu"></span>
              <div class="name">帮助</div>
              <div class="code-name">.icon-bangzhu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-faxian"></span>
              <div class="name">发现</div>
              <div class="code-name">.icon-faxian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shijian"></span>
              <div class="name">时间</div>
              <div class="code-name">.icon-shijian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shouye"></span>
              <div class="name">首页</div>
              <div class="code-name">.icon-shouye</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yanchu"></span>
              <div class="name">演出</div>
              <div class="code-name">.icon-yanchu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-remen"></span>
              <div class="name">热门</div>
              <div class="code-name">.icon-remen</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-music"></span>
              <div class="name">music</div>
              <div class="code-name">.icon-music</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiaoxi"></span>
              <div class="name">消息</div>
              <div class="code-name">.icon-xiaoxi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-wangyiyun"></span>
              <div class="name">网易云</div>
              <div class="code-name">.icon-wangyiyun</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-bofang-xunhuanbofang"></span>
              <div class="name">播放-循环播放</div>
              <div class="code-name">.icon-bofang-xunhuanbofang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-kugouyinle"></span>
              <div class="name">酷狗音乐</div>
              <div class="code-name">.icon-kugouyinle</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dangqianweizhi"></span>
              <div class="name">当前位置</div>
              <div class="code-name">.icon-dangqianweizhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-quxiaoguanbi"></span>
              <div class="name">取消（关闭）</div>
              <div class="code-name">.icon-a-quxiaoguanbi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shijian1"></span>
              <div class="name">时间</div>
              <div class="code-name">.icon-shijian1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiangyou"></span>
              <div class="name">向右</div>
              <div class="code-name">.icon-xiangyou</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiangzuo"></span>
              <div class="name">向左</div>
              <div class="code-name">.icon-xiangzuo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zuixiaohua1"></span>
              <div class="name">最小化</div>
              <div class="code-name">.icon-zuixiaohua1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-tingzhiwukuang"></span>
              <div class="name">停止（无框）</div>
              <div class="code-name">.icon-a-tingzhiwukuang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dibu"></span>
              <div class="name">底部</div>
              <div class="code-name">.icon-dibu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fanhui"></span>
              <div class="name">返回</div>
              <div class="code-name">.icon-fanhui</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gengduo"></span>
              <div class="name">更多</div>
              <div class="code-name">.icon-gengduo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gengduo2"></span>
              <div class="name">更多</div>
              <div class="code-name">.icon-gengduo2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-suduxingneng"></span>
              <div class="name">速度性能</div>
              <div class="code-name">.icon-a-suduxingneng</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-weixianjinggao"></span>
              <div class="name">危险警告</div>
              <div class="code-name">.icon-weixianjinggao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-yinleyinxiaoduomeiti"></span>
              <div class="name">音乐音效</div>
              <div class="code-name">.icon-a-yinleyinxiaoduomeiti</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-yinlebofangliebiaoyinle"></span>
              <div class="name">音乐播放列表</div>
              <div class="code-name">.icon-a-yinlebofangliebiaoyinle</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="font-class-">font-class 引用</h2>
            <hr />

            <p>
              font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
              书写不直观，语意不明确的问题。
            </p>
            <p>与 Unicode 使用方式相比，具有如下特点：</p>
            <ul>
              <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
              <li>
                因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode
                引用。
              </li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
            <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
            <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
            </blockquote>
          </div>
        </div>
        <div class="content symbol">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-mg"></use>
              </svg>
              <div class="name">咪咕音乐</div>
              <div class="code-name">#icon-mg</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-qq"></use>
              </svg>
              <div class="name">QQ音乐</div>
              <div class="code-name">#icon-qq</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-wy"></use>
              </svg>
              <div class="name">网易云音乐</div>
              <div class="code-name">#icon-wy</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-kg"></use>
              </svg>
              <div class="name">酷狗音乐</div>
              <div class="code-name">#icon-kg</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-kw"></use>
              </svg>
              <div class="name">酷我音乐</div>
              <div class="code-name">#icon-kw</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao"></use>
              </svg>
              <div class="name">列表</div>
              <div class="code-name">#icon-liebiao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shengyin"></use>
              </svg>
              <div class="name">声音</div>
              <div class="code-name">#icon-shengyin</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-minimize"></use>
              </svg>
              <div class="name">minimize</div>
              <div class="code-name">#icon-minimize</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bofang"></use>
              </svg>
              <div class="name">播放</div>
              <div class="code-name">#icon-bofang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zanting"></use>
              </svg>
              <div class="name">暂停</div>
              <div class="code-name">#icon-zanting</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shangyishou"></use>
              </svg>
              <div class="name">上一首</div>
              <div class="code-name">#icon-shangyishou</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiayishou"></use>
              </svg>
              <div class="name">下一首</div>
              <div class="code-name">#icon-xiayishou</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xuanxiangshanchu"></use>
              </svg>
              <div class="name">选项删除</div>
              <div class="code-name">#icon-xuanxiangshanchu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-guanbi"></use>
              </svg>
              <div class="name">关闭4</div>
              <div class="code-name">#icon-guanbi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xinxi"></use>
              </svg>
              <div class="name">信息53</div>
              <div class="code-name">#icon-xinxi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zuixiaohua"></use>
              </svg>
              <div class="name">最小化</div>
              <div class="code-name">#icon-zuixiaohua</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-QQmusic"></use>
              </svg>
              <div class="name">QQ音乐</div>
              <div class="code-name">#icon-QQmusic</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shunxubofangtubiao"></use>
              </svg>
              <div class="name">顺序播放图标</div>
              <div class="code-name">#icon-shunxubofangtubiao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-suijibofang"></use>
              </svg>
              <div class="name">随机播放</div>
              <div class="code-name">#icon-suijibofang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bofangjilu"></use>
              </svg>
              <div class="name">播放记录</div>
              <div class="code-name">#icon-bofangjilu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-chuangzuo"></use>
              </svg>
              <div class="name">创作</div>
              <div class="code-name">#icon-chuangzuo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuzhi"></use>
              </svg>
              <div class="name">复制</div>
              <div class="code-name">#icon-fuzhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-huatifuhao"></use>
              </svg>
              <div class="name">话题符号</div>
              <div class="code-name">#icon-huatifuhao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shaixuan"></use>
              </svg>
              <div class="name">筛选</div>
              <div class="code-name">#icon-shaixuan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shanchu"></use>
              </svg>
              <div class="name">删除</div>
              <div class="code-name">#icon-shanchu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shezhi"></use>
              </svg>
              <div class="name">设置</div>
              <div class="code-name">#icon-shezhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zengjia"></use>
              </svg>
              <div class="name">增加</div>
              <div class="code-name">#icon-zengjia</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bangzhu"></use>
              </svg>
              <div class="name">帮助</div>
              <div class="code-name">#icon-bangzhu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-faxian"></use>
              </svg>
              <div class="name">发现</div>
              <div class="code-name">#icon-faxian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shijian"></use>
              </svg>
              <div class="name">时间</div>
              <div class="code-name">#icon-shijian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shouye"></use>
              </svg>
              <div class="name">首页</div>
              <div class="code-name">#icon-shouye</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yanchu"></use>
              </svg>
              <div class="name">演出</div>
              <div class="code-name">#icon-yanchu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-remen"></use>
              </svg>
              <div class="name">热门</div>
              <div class="code-name">#icon-remen</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-music"></use>
              </svg>
              <div class="name">music</div>
              <div class="code-name">#icon-music</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiaoxi"></use>
              </svg>
              <div class="name">消息</div>
              <div class="code-name">#icon-xiaoxi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-wangyiyun"></use>
              </svg>
              <div class="name">网易云</div>
              <div class="code-name">#icon-wangyiyun</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-bofang-xunhuanbofang"></use>
              </svg>
              <div class="name">播放-循环播放</div>
              <div class="code-name">#icon-bofang-xunhuanbofang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-kugouyinle"></use>
              </svg>
              <div class="name">酷狗音乐</div>
              <div class="code-name">#icon-kugouyinle</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dangqianweizhi"></use>
              </svg>
              <div class="name">当前位置</div>
              <div class="code-name">#icon-dangqianweizhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-quxiaoguanbi"></use>
              </svg>
              <div class="name">取消（关闭）</div>
              <div class="code-name">#icon-a-quxiaoguanbi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shijian1"></use>
              </svg>
              <div class="name">时间</div>
              <div class="code-name">#icon-shijian1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiangyou"></use>
              </svg>
              <div class="name">向右</div>
              <div class="code-name">#icon-xiangyou</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiangzuo"></use>
              </svg>
              <div class="name">向左</div>
              <div class="code-name">#icon-xiangzuo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zuixiaohua1"></use>
              </svg>
              <div class="name">最小化</div>
              <div class="code-name">#icon-zuixiaohua1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-tingzhiwukuang"></use>
              </svg>
              <div class="name">停止（无框）</div>
              <div class="code-name">#icon-a-tingzhiwukuang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dibu"></use>
              </svg>
              <div class="name">底部</div>
              <div class="code-name">#icon-dibu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fanhui"></use>
              </svg>
              <div class="name">返回</div>
              <div class="code-name">#icon-fanhui</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo"></use>
              </svg>
              <div class="name">更多</div>
              <div class="code-name">#icon-gengduo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo2"></use>
              </svg>
              <div class="name">更多</div>
              <div class="code-name">#icon-gengduo2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-suduxingneng"></use>
              </svg>
              <div class="name">速度性能</div>
              <div class="code-name">#icon-a-suduxingneng</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-weixianjinggao"></use>
              </svg>
              <div class="name">危险警告</div>
              <div class="code-name">#icon-weixianjinggao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-yinleyinxiaoduomeiti"></use>
              </svg>
              <div class="name">音乐音效</div>
              <div class="code-name">#icon-a-yinleyinxiaoduomeiti</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-yinlebofangliebiaoyinle"></use>
              </svg>
              <div class="name">音乐播放列表</div>
              <div class="code-name">#icon-a-yinlebofangliebiaoyinle</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="symbol-">Symbol 引用</h2>
            <hr />

            <p>
              这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
                href=""
                >文章</a
              >
              这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
            </p>
            <ul>
              <li>支持多色图标了，不再受单色限制。</li>
              <li>
                通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
                <code>color</code> 来调整样式。
              </li>
              <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
              <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
            <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
            <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
            <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        $('.tab-container .content:first').show()

        $('#tabs li').click(function (e) {
          var tabContent = $('.tab-container .content')
          var index = $(this).index()

          if ($(this).hasClass('active')) {
            return
          } else {
            $('#tabs li').removeClass('active')
            $(this).addClass('active')

            tabContent.hide().eq(index).fadeIn()
          }
        })
      })
    </script>
  </body>
</html>
